<template>
    <div class="footer">
        <el-button class="footer-button" type="danger" round @click="goService">多模态异构业务</el-button>
        <el-button class="footer-button" type="danger" round @click="goCollection">分布式多源数据采集及预处理</el-button>
        <el-button class="footer-button" type="danger" round @click="goRecoginze">联邦特征分析与流量识别</el-button>
        <el-button class="footer-button" type="danger" round @click="goAnalyse">全局负载感知及策略自治</el-button>
    </div>
</template>

<script>
export default {
    name: 'Footer',
    methods: {
        goRecoginze() {
            this.$router.push('/recognize');
        },
        goCollection() {
            this.$router.push('/collection');
        },
        goService() {
            this.$router.push('/service');
        },
        goAnalyse() {
            this.$router.push('/analyse');
        }
    }
}
</script>

<style scoped>
.footer {
    display: flex;
    height: 10%;
    margin: 1% 2%;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #f5f7fa, #c3cfe2); /* 整体背景渐变 */
    padding: 10px; /* 增加内边距，防止按钮靠得太紧 */
    border-radius: 16px; /* 为按钮组整体添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加整体阴影效果 */
}

.footer-button {
    flex: 1; /* 每个按钮平均分配空间 */
    height: 100%;
    font-size: 30px; /* 调整字体大小以适应连续布局 */
    border: none;
    margin: 0; /* 去掉按钮之间的间隙 */
    border-radius: 0; /* 按钮之间无单独圆角 */
    background: transparent; /* 按钮背景透明，融入整体背景 */
    color: black;
    transition: all 0.3s ease;
}

.footer-button:not(:last-child) {
    border-right: 2px solid rgba(0, 0, 0, 0.5); /* 添加按钮间的分隔线 */
}

.footer-button:hover {
    background: rgba(0, 0, 0, 0.1); /* 悬停时改变背景色 */
    transform: scale(1.05); /* 鼠标悬停时稍微放大 */
}

.footer-button:focus {
    outline: none;
}

.footer-button:active {
    transform: scale(1); /* 点击时恢复原大小 */
}
</style>
